<script setup>

import OrganizationTreeSelect from "@/components/organization-tree-select/index.vue";
import {useSysOrganizationById, useSysOrganizationMutations} from "@/composables/sys/organization.js";
import {useMessage} from "naive-ui";

const emits = defineEmits(["close"])
const formRef = ref(null)
const props = defineProps({
  show: {
    type: Boolean,
    required: false
  },
  id: {
    type: String,
    required: false
  }
})
// 编辑处理
const idRef = computed(() => props.id)
const {data, isLoading} = useSysOrganizationById(idRef)

const isEdit = computed(() => !!props.id)

const message = useMessage()
const sysOrganizationMutations = useSysOrganizationMutations()

const defaultFormData = {
  id: null,
  name: '',
  code: '',
  parentCode: '',
  sort: 1
}

const formData = ref({...defaultFormData})
const formRules = {
  name: [
    {required: true, message: '请输入机构名称', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入机构代码', trigger: 'blur'}
  ],
  parentCode: [
    {required: true, message: '请选择上级机构', trigger: 'change'}
  ],
  sort: [
    {required: true, type: 'number', message: '请输入排序号', trigger: 'blur'}
  ]
}

// 关闭
const close = () => {
  emits('close')
  formData.value = {...defaultFormData}
}
// 提交
const formSubmit = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      if (isEdit.value) {
        await remoteUpdate();
      } else {
        await remoteAdd();
      }
    }
  })
}

// 新增
async function remoteAdd() {
  const {code} = await sysOrganizationMutations.create.mutateAsync(formData.value)
  if (code === 1) {
    message.success('新增成功')
    close()
  }
}
// 修改
async function remoteUpdate() {
  const {code} = await sysOrganizationMutations.update.mutateAsync(formData.value)
  if (code === 1) {
    message.success('修改成功')
    close()
  }
}

// 监听编辑数据
watchEffect(() => {
  if (props.id && data?.value?.data && !isLoading.value) {
    formData.value = {
      ...data.value.data,
      parentCode: data.value.data.parentCode || '-'
    }
  }
})
</script>

<template>
  <n-drawer
      :show="show"
      :default-width="600"
      :min-width="400"
      resizable
      @esc="close"
  >
    <n-drawer-content>
      <template #header>
        新增机构
      </template>
      <n-form ref="formRef" :model="formData" :rules="formRules">
        <n-form-item label="上级机构" path="parentCode">
          <organization-tree-select :disabled="isEdit" v-model:value="formData.parentCode"/>
        </n-form-item>
        <n-form-item label="机构名称" path="name">
          <n-input v-model:value="formData.name" placeholder="请输入机构名称"/>
        </n-form-item>
        <n-form-item label="机构代码" path="code" v-if="!isEdit">
          <n-input v-model:value="formData.code" placeholder="请输入机构代码">
            <template #prefix>
              <span>{{ formData.parentCode === '-' ? '' : formData.parentCode }}</span>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item label="排序号" path="sort">
          <n-input-number v-model:value="formData.sort" :min="1" :max="288" placeholder="请输入排序号"/>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button size="small" @click="close">关闭</n-button>
          <n-button size="small" type="primary" @click="formSubmit">确定</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>

</style>